<template>
  <div class="table-list">
    <el-row>
      <Title :is-show="true" :total="detailData.length" title="订单信息" style="margin: 24px 0;">
        <div v-if="totalAmount || totalAmount == 0" class="total-amount-price">
        <img :src="incomeAmountIcon" alt="">
        总含税金额：<span class="price">{{ totalAmount }}</span>
        </div>
      </Title>
      <el-table
        v-if="detailData.length > 0"
        :data="handleData"
        class="fb-table"
        header-cell-class-name="order-data-header-cell"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        border
        fit
        style="margin-left: 4px;">
        <el-table-column
          :index="indexMethod"
          label="序号"
          type="index"
          width="50" />
        <el-table-column align="left" label="订单编号" min-width="100">
          <template slot-scope="scope">
            <el-tooltip placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ scope.row.orderNum || '--' }}</div>
              <div class="ellipsis">{{ scope.row.orderNum || '--' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="left" label="采买项目" min-width="100">
          <template slot-scope="scope">
            <el-tooltip placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ scope.row.buyProject || '--' }}</div>
              <div class="ellipsis">{{ scope.row.buyProject || '--' }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="left" label="采买类型" min-width="280">
          <template slot-scope="scope">
            {{ scope.row.buyType | cascaderStatus(buyTypeOptions) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="合同金额类型" min-width="240">
          <template slot-scope="scope">
            {{ scope.row.conMonType | cascaderStatus(conMoneyTypeOptions) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="合同金额（含税）" min-width="160">
          <template slot-scope="scope">
            {{ scope.row.contractPrice | moneyFilter }}
          </template>
        </el-table-column>
      </el-table>
      <empty-placeholder v-else style="margin-bottom: 24px" />
    </el-row>
    <el-row :justify="showMobilePage ? 'start':'end'" type="flex" class="pagination-area">
      <el-pagination
        v-show="detailData.length > 0"
        :current-page="page"
        :page-size="perPage"
        :total="detailData.length"
        :small="showMobilePage"
        :page-sizes="[10, 20, 50, 100, 250, 500]"
        :layout="showMobilePage ? 'prev, pager, next' : 'total, prev, pager, next, sizes, jumper'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-row>
  </div>
</template>

<script>
import { orderType, contentSource, exeType, conMoneyTypeOptions, buyTypeOptions } from '../../module/options';
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import { mapOptions } from '@/filters';
import { moneyFilter } from '@/filters/number';
import incomeAmountIcon from '@/assets/chargeOffDetail/incomeAmount.png';

export default {
  name: 'StaffRelatedOrderList',
  filters: {
    mapOptions,
    moneyFilter,
    cascaderStatus(value, options) {
      if (value && value.length > 0) {
        let str = '';
        const target = options.filter(item => item.value === value[0]);
        str += target[0].label;
        const children = target[0].children;
        const second = children.filter(item => item.value === value[1])[0];
        if (second) {
          str = str + ' / ' + second.label;
        }
        return str;
      } else {
        return '--';
      }
    }
  },
  components: {
    Title,
    EmptyPlaceholder
  },
  props: {
    totalAmount: {
      type: [String, Number],
      default: 0.00
    },
    detailData: {
      type: Array,
      default: () => []
    },
    showMobilePage: {// 移动端
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      incomeAmountIcon,
      orderType,
      contentSource,
      conMoneyTypeOptions,
      buyTypeOptions,
      exeType,
      page: 1,
      perPage: 10,
      listLoading: true
    };
  },
  computed: {
    handleData() {
      return this.detailData.slice((this.page - 1) * this.perPage, this.page * this.perPage);
    }
  },
  methods: {
    // 自定义序号
    indexMethod(index) {
      return index + (this.page - 1) * this.perPage + 1;
    },
    handleSizeChange(val) {
      this.perPage = val;
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.table-list {
  margin-bottom: 30px;
  .total-amount-price {
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
    color: #999;
    font-size: 12px;
    font-weight: normal;
    margin-left: 10px;
    padding: 4px 6px;
    border-radius: 4px;
    > img {
      width: 14px;
      margin-right: 5px;
    }
    .price {
      font-size: 14px;
      color: #406eff;
      font-weight: bold;
    }
  }
}
</style>
